<template>
	<view class="details">
		<view class="listbg"></view>
		<!-- 顶部样式 -->
			<mucishead title="排行榜" :icon="true" color="#000"></mucishead>
			<scroll-view scroll-y="true" >
			<!-- 榜单推荐 -->
			<!-- <view class="details-top">
					<view class="detail-top-text" >榜单推荐</view>
					<view class="top">
						
						<view class="details-top-list">
							<image src="../../static/images/song_1.jpg" mode="">
								<view class="details-top-gx">每日更新</view>
							</image>
							<text>云音乐古风榜单</text>
						</view>
						<view class="details-top-list">
							<image src="../../static/images/song_1.jpg" mode="">
								<view class="details-top-gx">每日更新</view>
							</image>
							<text>云音乐古风榜单</text>
						</view>
						<view class="details-top-list">
							<image src="../../static/images/song_1.jpg" mode="">
								<view class="details-top-gx">每日更新</view>
							</image>
							<text>云音乐古风榜单</text>
						</view>
					</view>
					
			</view> -->
			
			<!-- 官方榜单 -->
			<view class="details-center ">
				<view class="details-center-top">
					官方榜单
				</view>
				<view class="details-center-item" v-for="(item,index) in topList" :key = 'index' @click="handTolist(item.id)">
					<view class="details-center-left">
					<view>{{item.name}}</view>
					<image :src="item.coverImgUrl" mode=""></image>
					</view>
					<view class="details-center-right" >
						<view v-for="(item,index) in item.tracks" :key="index">
							{{index +1}}.{{item.first}}-{{item.second}}
						</view>
						
					</view>
				</view>
				<!-- <view class="details-center-item">
					<view class="details-center-left">
					<view>飙升榜</view>
					<image src="../../static/images/song_1.jpg" mode=""></image>
					</view>
					<view class="details-center-right">
						<view>1、没你也能活下去 -JONY</view>
						<view>2、没你也能活下去 -JONY</view>
						<view>3、没你也能活下去 -JONY</view>
					</view>
				</view> -->
			</view>
			
			
			<!-- 精选榜 -->
			<view class="details-top">
				<view class="detail-top-text" >精选榜</view>
				<view class="top">
					<view class="details-top-list" v-for="(item,index) in songtopLists" :key="index" @click="handTolist(item.id)" >
						<image :src="item.coverImgUrl" mode="">
							<view class="details-top-gx">{{item.updateFrequency}}</view>
						</image>
						<view class="details-top-name">{{item.name}}</view>
					</view>
					<!-- <view class="details-top-list">
						<image src="../../static/images/song_1.jpg" mode="">
							<view class="details-top-gx">每日更新</view>
						</image>
						<text>云音乐古风榜单</text>
					</view> -->
				</view>
				
			</view>
			
			</scroll-view>
			
	</view>
</template>

<script>
	import '../../common/iconfont.css'
	import mucishead from '../../components/mucishead/mucishead.vue'
	import {toplist,songtoplists} from '../../common/api.js'
	export default {	
		data() {
			return {
				topList:[],
				songtopLists:[],
			}
		},
		methods: {
			
		},
		// 加载页面数据
		onLoad(options) {
			// 加载loding
			
				uni.showLoading({
				    title: '加载中'
				});
			toplist().then((res) =>{
				if(res.length){
				this.topList = res;
			}
			}),
			songtoplists().then((res)=>{
					console.log(res)
					if(res.length){
				let songtopLists = res.slice(4);
				 this.songtopLists = songtopLists;
				 }
				
			})
			
		},
		methods:{
			handTolist:function(listId){
				console.log(listId)
				uni.navigateTo({
					url:'/pages/list/list?listId=' + listId
				})
				
			}
		},
		// 组件
		components:{
			mucishead
		},
		
	}
</script>

<style scoped>
	.details{
		background-color: #f6f6f6;
	}
	.details-top{
		width:680rpx;
		margin: 30rpx;
		background-color: #fff;
	}
	.detail-top-text{
		color: #000000 !important;
		font-size: 32rpx;
		font-weight: 900;
		width: 70px;
		height: 40px;
		text-align: center;
		line-height: 40px;
	}
	.top{
		width: 100%;
		/* height: 240rpx; */
		display: flex;
		flex-wrap: wrap;
	}
	.top .details-top-list{
		margin-left: 15rpx !important;
		
	}
	
	.details-top-list{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		position: relative;
	}
	
	.details-top-list image{
		width: 190rpx;
		height: 190rpx;
		border-radius: 20rpx;
	    
	}
	.details-top-gx{
		width: 136rpx;
		height:30rpx;
		line-height: 30rpx;
		background: rgba(0,0,0,0.4);
		text-align: center;
		border-radius: 30rpx;
		position: absolute;
		top:8rpx;
		right:10rpx;
		font-size:24rpx;
		color: #fff;
	}
	.details-top-name{
		color: #000;
		font-size: 24rpx;
		width:180rpx;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.details-center{
		margin: 30rpx;
		
	}
	.details-center-top{
		font-size: 32rpx;
		font-weight:900;
		margin-bottom:20rpx;
	}
	.details-center-item{
		height: 250rpx;
		width: 680rpx;
		background-color: #f3e2e8;
		display: flex;
		border-radius: 20rpx;
		margin-bottom:20rpx;
	}
	
	.details-center-left{
		margin: 20rpx 40rpx 40rpx 40rpx;
	}
   .details-center-left view{
	   font-size: 32rpx;
	   color: #ec2f76;
	   margin-bottom:20rpx	 ;
   }
   .details-center-left image{
	   width: 120rpx;
	   height: 120rpx;
	   border-radius: 20rpx;
   }
   .details-center-right{
	   width: 420rpx;
	   font-size: 24rpx;
	   line-height: 66rpx;
	   margin-top: 30rpx;
	   overflow: hidden;
		white-space: nowrap;
   }
</style>
